<ion-header>
    <ion-navbar>
        <ion-title>辣条</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="uploadPictures()"><ion-icon name="add"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content class="card-background-page">
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="再拉下试试？" refreshingSpinner="circles" refreshingText="努力加载中...">
        </ion-refresher-content>
    </ion-refresher>
    <ion-card *ngFor="let article of articles">
        <ion-item>
            <ion-avatar item-left>
                <img *ngIf="!article.authorAvatar" src="https://tse2.mm.bing.net/th?id=OIP.M5ee17585b67e1eb4aac619da7563bed7o0&pid=15.1">
                <img *ngIf="article.authorAvatar" [src]="article.authorAvatar">
            </ion-avatar>
            <h6>{{article.authorName}}</h6>
            <p item-right>
                {{article.device}}
            </p>
        </ion-item>
        <ion-card-content tappable *ngIf="article.content" (click)="gotoDetailPage(article)">
            <p>{{article.content}}</p>
        </ion-card-content>
        <img tappable *ngFor="let image of article.images" [src]="image.url" (click)="gotoDetailPage(article)">
        <ion-item>
            <button primary clear item-left>
                <ion-icon name="thumbs-up"></ion-icon>
                <div *ngIf="!article.likeCount" >0 喜欢</div>
                <div *ngIf="article.likeCount" >{{article.likeCount}} 喜欢</div>
            </button>
            <button primary clear item-left (click)="gotoDetailPage(article)">
                <ion-icon name="text"></ion-icon>
                 <div *ngIf="!article.commentCount">0 吐槽</div>
                 <div *ngIf="article.commentCount">{{article.commentCount}} 吐槽</div>
             </button>
            <ion-note item-right>
                {{article.createTime}}
            </ion-note>
        </ion-item>
    </ion-card>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="努力加载中..."></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>